When a browser renders a page, the browser computes formatting information for elements on the page. To compute the format on the page, the browser may parse a document including mark-up language that defines elements on the page and a cascade style sheet (CSS) that defines the presentation of the elements in the document. The browser generates a document object model (DOM) of nodes from the document and also styles from the CSS. The browser can apply the styles to the nodes to generate formatting information for the nodes. For example, the styles may select a background color and font size for nodes in the DOM.
The above process computes an internal browser representation of all applicable styles per node of the DOM. In the process, the formatting computation takes DOM nodes and styles defined in the CSS as input and produces node property values as an output. The computed format on each node is then stored and used in the rendering of the page for the document. Upon completing the above formatting computation, the property values stored on the elements are considered valid and can be used until a change makes these property values invalid. This may occur when any of the inputs of the formatting process, such as in the DOM or the styles, change in a way that require the formatting computed earlier to be invalidated and re-computed.
When the change occurs, the browser may identify a subtree in the DOM associated with the change, invalidate the formatting for all properties for the nodes in the subtree, and then re-perform the format computation for all the nodes of the subtree. Thus, the entire formatting is re-calculated to determine the computed format on each node of the subtree, which is a computationally intensive operation. In some examples, the nodes may have multiple property values applied, such as font size and background color. However, the change may not involve all the property values, such as only the background color may change. Even though only the background color changes, the browser invalidates the entire formatting on the node and recalculates the formatting for both the font size and the background color.